<!-- 审批详情的右侧：审批流 -->
<template>
 <div class="processBox">
   <div class="horizontal-timeline">
  <el-steps class="pt-[20px] pb-[20px]">
    <!-- 遍历每个审批节点 -->
    <el-step
      size="large"
      status="success"
    >
      <template #icon>
        <div
          class="absolute left--[10px] top--[6px] rounded-full border border-solid border-[#dedede] w-[30px] h-[30px] flex justify-center items-center bg-[#3f73f7] p-[5px]"
        >
          <img class="w-full h-full" :src="starterSvg" alt="" />
          <div
            class="absolute top-[17px] left-[17px] rounded-full flex items-center p-[1px] border-2 border-white border-solid"
            style="background-color: rgb(0, 179, 42);"
          >
            <el-icon :size="11" color="#fff">
              <component :is="Check" />
            </el-icon>
          </div>
        </div>
      </template>
      <template #title>
      <div class="flex flex-col items-start gap2">
        <!-- 第一行：节点名称、时间 -->
        <div class="flex w-full">
          <div class="font-bold"> 发起人</div>
          <!-- 信息：时间 -->
          <div
            class="text-[#a5a5a5] text-[12px] mt-1"
          >
            {{checkdate}}
          </div>
        </div> 
      </div>
      </template>
      <template #description>
        <div class="flex items-center flex-wrap mt-1 gap2">
          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
          <div  class="flex flex-col pr-2 gap2">
            <div
              class="relative flex flex-wrap gap2"
            >
              <!-- 信息：头像昵称 -->
              <div
                class="bg-gray-100 h-[35px] rounded-3xl flex items-center pr-[8px] dark:color-gray-600 position-relative"
              >
                  <el-avatar class="!m-[5px]" :size="28" v-if="user.avatar" :src="avatarUrl" />         
            <el-avatar class="!m-[5px]" :size="28" v-else>
              {{ checker.substring(0, 1) }}
            </el-avatar>
                {{checker}}
             
              </div>
            </div>
            <div>

            </div>
          </div>
        
       
        </div>
      </template>
   
    </el-step>

    <el-step
      size="large"
      status="success"
    >
      <template #icon>
        <div
          class="absolute left--[10px] top--[6px] rounded-full border border-solid border-[#dedede] w-[30px] h-[30px] flex justify-center items-center bg-[#3f73f7] p-[5px]"
        >
          <img class="w-full h-full" :src="auditorSvg" alt="" />
          <div
            class="absolute top-[17px] left-[17px] rounded-full flex items-center p-[1px] border-2 border-white border-solid"
            style="background-color: rgb(0, 179, 42);"
          >
            <el-icon :size="11" color="#fff">
              <component :is="Check" />
            </el-icon>
          </div>
        </div>
      </template>
      <template #title>
      <div class="flex flex-col items-start gap2">
        <!-- 第一行：节点名称、时间 -->
        <div class="flex w-full">
          <div class="font-bold"> 科研管理员</div>
          <!-- 信息：时间 -->
          <div
            class="text-[#a5a5a5] text-[12px] mt-1"
          >
            {{checkdate}}
          </div>
        </div> 
      </div>
      </template>
      <template #description>
        <div class="flex items-center flex-wrap mt-1 gap2">
          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
          <div  class="flex flex-col pr-2 gap2">
            <div
              class="relative flex flex-wrap gap2"
            >
              <!-- 信息：头像昵称 -->
              <div
                class="bg-gray-100 h-[35px] rounded-3xl flex items-center pr-[8px] dark:color-gray-600 position-relative"
              >
                 
                    <el-avatar class="!m-[5px]" :size="28" v-if="user.avatar" :src="avatarUrl" />         
            <el-avatar class="!m-[5px]" :size="28" v-else>
              {{ checker.substring(0, 1) }}
            </el-avatar>
                {{checker}}
             
              </div>
            </div>
            <div>
            </div>
          </div>
        </div>
      </template>
   
    </el-step>
    <el-step
      size="large"
      status="success"
    >
      <template #icon>
        <div
          class="absolute left--[10px] top--[6px] rounded-full border border-solid border-[#dedede] w-[30px] h-[30px] flex justify-center items-center bg-[#3f73f7] p-[5px]"
        >
          <img class="w-full h-full" :src="finishSvg" alt="" />
          <div
            class="absolute top-[17px] left-[17px] rounded-full flex items-center p-[1px] border-2 border-white border-solid"
            style="background-color: rgb(0, 179, 42);"
          >
            <el-icon :size="11" color="#fff">
              <component :is="Check" />
            </el-icon>
          </div>
        </div>
      </template>
      <template #title>
      <div class="flex flex-col items-start gap2">
        <!-- 第一行：节点名称、时间 -->
        <div class="flex w-full">
          <div class="font-bold"> 结束</div>
          <!-- 信息：时间 -->
          <div
            class="text-[#a5a5a5] text-[12px] mt-1"
          >
           {{checkdate}}
          </div>
        </div> 
      </div>
      </template>
      <template #description>
        <div class="flex items-center flex-wrap mt-1 gap2">
          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
          <div  class="flex flex-col pr-2 gap2">
            <div
              class="relative flex flex-wrap gap2"
            >
              <!-- 信息：头像昵称 -->
              <div
                class="bg-gray-100 h-[35px] rounded-3xl flex items-center pr-[8px] dark:color-gray-600 position-relative"
              >
            <!-- <el-avatar class="!m-[5px]" :size="28" v-if="user.avatar" :src="avatarUrl" />         
            <el-avatar class="!m-[5px]" :size="28" v-else>
              {{ checker.substring(0, 1) }}
            </el-avatar> -->
              <el-avatar class="!m-[5px]" :size="28">
              {{ checker.substring(0, 1) }}
            </el-avatar> 
                {{checker}}
                
             
              </div>
            </div>
            <div>

            </div>
          </div>
        
       
        </div>
      </template>
   
    </el-step>
  </el-steps>
   </div>
  <!-- 用户选择弹窗 -->
 </div>
</template>

<script  setup>
import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
const baseUrl = import.meta.env.VITE_APP_BASE_API;
import { formatDate } from '@/utils/formatTime'
import starterSvg from '@/assets/svgs/bpm/starter.svg'
import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
import copySvg from '@/assets/svgs/bpm/copy.svg'
import conditionSvg from '@/assets/svgs/bpm/condition.svg'
import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
import finishSvg from '@/assets/svgs/bpm/finish.svg'
import {
getUserProfile
} from "@/api/flowable/todo";

defineOptions({ name: 'BpmProcessInstanceStepOne' })
const  props= defineProps({
    checker: {
    type: String,
    default: "",
  },
    checkdate: {
    type: String,
    default: "",
  },
  })
  const user = ref({
});
const avatarUrl= ref("");
function getUser() {
  getUserProfile({userName:props.checker}).then(response => {
    user.value =response.data;
    avatarUrl.value=baseUrl+user.value.avatar
    console.log("user",avatarUrl)
  });
};

// getUser();

</script>

<style scoped>
.processBox{
  text-align: justify;
}
</style>


